<template>
  <div>
<!--    <div class="topBg"></div>-->
    <div class="topNavView">
      <div class="topNav">
        <div class="logo">首页</div>
        <div class="navList">
          <div class="item" :class="{'active':activeMode == 'video'}" @click="selectNav('video')">视频</div>
          <div class="item" :class="{'active':activeMode == 'voice'}" @click="selectNav('voice')">音频</div>
          <div class="item" :class="{'active':activeMode == 'pic'}" @click="selectNav('pic')">图片</div>
          <div class="item" :class="{'active':activeMode == 'doc'}" @click="selectNav('doc')">文档</div>
          <div class="item" :class="{'active':activeMode == 'other'}" @click="selectNav('other')">其他</div>
          <div class="item" :class="{'active':activeMode == 'user'}" @click="selectNav('user')"><i class="el-icon-user"></i> 个人中心</div>
          <div class="item" @click="goBack()"><i class="el-icon-link"></i> 跳转后台</div>
        </div>
      </div>
    </div>
    <div class="bgImg"></div>
    <div class="fileContent">
      <file-view :fileMode="activeMode" v-if="activeMode && activeMode != 'user'"></file-view>
      <userCenter v-if="activeMode && activeMode == 'user'"></userCenter>
    </div>
  </div>
</template>

<script>
import fileView from "./fileInfo/fileInfo/view.vue";
import userCenter from "@/views/system/user/profile/index"
export default {
  name: "Index",
  components: {fileView,userCenter},
  data() {
    return {
      fileTypes:[],
      activeMode:false,
      showFileView:false,
    };
  },
  created() {
    this.selectNav("video");
  },
  methods: {
    selectNav(nav){
      this.activeMode = nav
    },
    goBack(){
      window.location.href = "http://"+location.hostname+"/";
    },
  },
};
</script>

<style scoped lang="scss">
.topBg{
  width: 100%;
  height: 220px;
  background-image: url('~@/assets/images/topBg.jpg');
  background-repeat: no-repeat;
  background-size: cover;
}
.topNavView{
  height: 50px;
  background-color: #d0252e;
  line-height: 50px;
  color: white;
  font-size: 22px;
  cursor: pointer;
  .topNav{
    width: 1400px;
    margin: 0 auto;
    .logo{
      background-image: url("~@/assets/images/ship.png");
      background-size: 30px;
      background-repeat: no-repeat;
      background-position: center left;
      box-sizing: border-box;
      padding-left: 35px;
      width: 200px;
      float: left;
    }
    .navList{
      width: 1200px;
      float: left;
      display: flex;
      text-align: center;
      justify-content: center;
      align-items: center;
      font-size: 20px;
      .item{
        flex-grow: 1;
        &.active{
          background-color: #93161d;
        }
      }
    }

  }
}
</style>

